<%@page import="javax.swing.text.DateFormatter"%>
<%@page import="java.text.DateFormat"%>
<%@page import="java.util.Date"%>
<%@page import="org.ocpsoft.pretty.time.PrettyTime"%>
<%@ page language="java" isELIgnored="false" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<jsp:directive.include file="/WEB-INF/sitemesh-decorators/include.jsp" />

<html>
<body>
   <script type="text/javascript">
            $(document).ready(function() {
               var theme = getTheme();
               var source = [ "List", "Thumbnails" ];
               // Create a jqxDropDownList
               $("#jqxView").jqxDropDownList({
                  source : source,
                  selectedIndex : 0,
                  width : '108',
                  height : '26',
                  autoDropDownHeight : true,
                  theme : theme
               });
            });
         </script>
   <script type="text/javascript">
            $(document).ready(function() {
               var theme = getTheme();
               var source = [ "most recent", "A - Z", "Z - A" ];
               // Create a jqxDropDownList
               $("#jqxSort").jqxDropDownList({
                  source : source,
                  selectedIndex : 0,
                  width : '108',
                  height : '26',
                  autoDropDownHeight : true,
                  theme : theme
               });
               
               $('#jqxSort').bind('select', function (event) {
                  var args = event.args;
                  var item = $('#jqxSort').jqxDropDownList('getItem', args.index);
                  if (item != null) {
                      alert(item.index);
                  }
              });
            });
         </script>
<script type="text/javascript">
      function showDeletePanel(id){
         $('#dialogContainer').show();
         $('#deleteFolderID').val(id);
      }
      function hideDeletePanel(){
         $('#dialogContainer').hide();
      }
      function deleteFolder(){
         hideDeletePanel();
         var id = $('#deleteFolderID').val();
         
         $.ajax({
   			url : '${pageContext.request.contextPath}/ajax/folder/' + id +'/delete',
            type : "POST",
            dataType : "html",
            beforeSend : function() {
               $('#wait').show();
            },
            complete : function() {
               $('#wait').hide();
            },
            success : function(data) {
               $('#document-content').html(data);
            },
            error : function() {
               alert("Failure args: " + arguments);
            }
   		});
   		return false;
      }
   </script>
<script>
      function openDialog() {
         $("#dialog").dialog({
         resizable: false,
         draggable: false,
         modal: true,
         width: 1200,
         height: 500
         });
      }
   </script>
<link href="${pageContext.request.contextPath}/css/DocumentsPanel.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/upload/bootstrap-new.css" />
<link href="${pageContext.request.contextPath}/css/DocumentResultPanel.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/css/DialogPanel.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/jqwidgets/styles/jqx.base.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/jqwidgets/styles/jqx.darkblue.css" rel="stylesheet" type="text/css" />

   <div class="cubeTitleWrapper">
      <span class="cube_title">SharedWorkspaces</span> <span class="wklinks"> <span class="settings"><a
            href="">Settings</a></span>
      </span>
   </div>

   <div class="cube">
      <div>
         <div class="contentwrapper">
            <div class="contentcolumn">
               <div class="innertube">
                  <span>
                  <!-- show error -->
                  <c:if test="${error_page}">
                     <ul class="feedbackPanel">
                        <li class="feedbackPanelERROR">
                        <span class="feedbackPanelERROR">There is already a folder named &#039;abc&#039; at the specified destination. (Note: Folder names are case-sensitive)</span>
                        </li>
                     </ul>
                  </c:if>
                  <!-- end show error -->
                  </span>
                  <h2 class="userDefinedBg curved">Search Files</h2>
                  <div class="contentBlock documents">
                     <div class="search full userDefinedBg">
                        <form class="documentsPanel_searchForm" id="formc1" method="post" action="">
                           <div
                              style="width: 0px; height: 0px; position: absolute; left: -100px; top: -100px; overflow: hidden">
                              <input name="formc1_hf_0" id="formc1_hf_0" type="hidden">
                           </div>
                           <div class="textbox-wrapper">
                              <input class="searchFormPanel_input_text" name="search" type="text">
                           </div>
                           <span class="searchFormInputWrapper userDefinedBg">
                              <button type="submit" class="searchFormPanel_input_image" value="">
                                 <span>Search</span>
                              </button>
                           </span>
                        </form>
                        <div class="spacer"></div>
                     </div>
                  </div>
                  <div class="contentBlock_bottom">
                     <span class="right_end"><span></span></span>
                  </div>
                  
                  
                  <h2 class="userDefinedBg curved">
                     <span>Files &amp; Documents</span>
                  </h2>
                  <div class="subfilter_wrapper">
                     <div style="float: left;" id="documentOperationsPanelc2">
                        <div class="fileCommands">
                           <div class="subfilter">
                              <a class="selectAllLink btn" id="selectAllLinkc3" href="#" onclick="">Select all<span
                                 class="bmasks"> <span class="maskTopLeft"></span> <span class="maskTopRight"></span>
                                    <span class="maskBottomLeft"></span> <span class="maskBottomRight"></span>
                              </span>
                              </a>
                           </div>
                           <div class="subfilter">
                              <a id="moveLinkc4" style="display: none;"></a>
                           </div>
                           <div class="subfilter">
                              <a id="deleteLinkc5" style="display: none;"></a>
                           </div>
                           <div class="subfilter">
                              <a id="downloadLinkc6" style="display: none;"></a>
                           </div>
                           <div class="moveDialog" id="moveDialogc7"></div>
                           <div class="deleteDialog" id="deleteDialog">
                              <div style="display: none" id="dialogContainer">
                                 <div id="gcdialog">
                                    <div class="gcdtitle">
                                       <span class="title">Are you sure you want to delete the selected resources?</span>
                                    </div>
                                    <div class="contentwrapper">
                                       <div class="content">
                                          <span>
                                          <form id="deleteForm" method="post" action="">
                                             <div style="width:0px;height:0px;position:absolute;left:-100px;top:-100px;overflow:hidden">
                                                <input name="deleteFolderID" id="deleteFolderID" type="hidden">
                                             </div>
                                             <div style="background-color:#F4CDCA;border:2px solid #800C03;padding:10px;margin-bottom:10px;text-align:center;">
                                                <span style="margin:0 auto;">Deleting a folder will remove the folder and all of its files and sub-folders.
                                                   You will not be able to recover these files or folders once they're deleted!</span>
                                             </div>
                                             <div style="line-height:34px">
                                                <a id="deleteLink" class="gcSubmit" href="#" onclick="deleteFolder();">Delete files
                                                <span class="left"></span>
                                                <span class="right"></span>
                                                </a>
                                             or <a id="cancelDeleteLink" href="#" onclick="hideDeletePanel();">cancel</a>
                                             </div>
                                             <div class="spacer">&nbsp;</div>
                                          </form>
                                          </span>
                                       </div>
                                    </div>
                                    <div class="background userDefinedBg">
                                    </div>
                                 </div>
                              </div>
                           </div>
                           <div id="permissionsDialogc9"></div>
                           <div id="folderPermissionsDialogca"></div>
                           <div id="shareDialogcb"></div>
                        </div>
                     </div>
                     <div class="subfilter">

                        <label>View:&nbsp;&nbsp;</label>

                        <div id='jqxView' class="jquery-selectbox-sow jquery-custom-selectboxes-replaced"
                           style="margin: 4px 0pt; float: left"></div>


                        <label style="padding-left: 15px;">Sort by:&nbsp;&nbsp;</label>

                        <div id='jqxSort' class="jquery-selectbox-sow jquery-custom-selectboxes-replaced"
                           style="margin: 4px 0pt; float: left"></div>

                     </div>
                     <br class="clear">
                  </div>
                  <div class="contentBlock documentsViewPanel">

                     <div class="breadCrumbs">
                        Folders: <span> <span> » <span><em><span>ABC</span></em></span>
                        </span>
                        </span>
                     </div>
                     
                     <!-- control folder -->
                     <div id="document-content">
                        <%@include file="controls/c_folder.jsp" %>
                     </div>
                     <!-- end control folder -->
                     
                     <div class="spacer"></div>
                  </div>

                  <div class="contentBlock_bottom">
                     <span class="right_end"><span></span></span>
                  </div>

                  
                
                <div class="gcgoogledocs" id="googleDocsDialogd0"></div>
            </div>
         </div>
                  

      </div>


         <div class="rightcolumn">
            <div class="innertube">
               <h2 class="userDefinedBg">
                  <span class="right_end"><span class="start">Tools</span></span>
               </h2>

               <div>
                  <div class="contentBlock">
                     <div class="spacer">&nbsp;</div>
                     <ul class="toolbox userDefinedColor">
                        <li class="userDefinedBg"><a class="add_link singleupload" id="singleFileUploadLinkd1"
                           href="#" rel="popup_name" onclick="openDialog();">Upload new document</a></li>
                        <li class="userDefinedBg"><a class="add_link multiupload" 
                           href="${pageContext.request.contextPath}/file/upload?p=${currentFolderID}" onclick="">Upload multiple files</a></li>

                        <li class="userDefinedBg"></li>

                        <li class="expandable userDefinedBg">
                           <div class="newfolder">

                              <div style="display: block; height: 36px;" id="addLink">
                                 <a href="javascript:;" class="add_link" style="position: relative;"><span
                                    class="add_title">New Folder</span><img class="arrow"
                                    src="${pageContext.request.contextPath}/images/arrow_green_right.png"></a>
                              </div>
                              <div class="panel_open" style="position: relative; display: none;" id="addLinkAlt">
                                 <span class="add_title">New Folder</span> <span class="arrow" id="downarrow">
                                    <img src="${pageContext.request.contextPath}/images/arrow_green_bottom.png">
                                 </span>
                              </div>

                              <div style="display: none;" id="hiddenArea">
                              <!-- include folder form -->
                                 <%@include file="controls/c_folder_form.jsp" %>
                              <!-- end include folder form -->
                              </div>
                           </div>
                        </li>
                     </ul>
                     <div class="spacer">&nbsp;</div>
                  </div>
                  <div class="contentBlock_bottom">
                     <span class="right_end"><span></span></span>
                  </div>
               </div>

               <!--<div class="tool_contentBox">
                  <h2 class="userDefinedBg">Filter by Label</h2>
                  <div class="contentBlock">
                     <ul class="documentsPanel_labels">
                        <li><a
                           href="https://abcxyz.glasscubes.com/?wicket:interface=:6:cubeDocsPanel:noLabelLink::ILinkListener::">All
                              files</a></li>

                     </ul>
                     <div class="spacer"></div>
                  </div>
                  <div class="contentBlock_bottom">
                     <span class="right_end"><span></span></span>
                  </div>
               </div> -->

            </div>
         </div>

      </div>
   </div>
   
   
                  <!-- UPLOAD FILES -->
                  <div style="display: none;" class="" id="singleFileUploadDialog">
                  
                        <div id="dialog" title="Upload new document">
                        <div style="padding-bottom: 10px;"></div>
                           <div class="container">
                            <!-- The file upload form used as target for the file upload widget -->
                            <form id="fileupload" action="${pageContext.request.contextPath}/file/upload?folderID=${currentFolderID}" method="POST" enctype="multipart/form-data">
                                <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
                                <div class="row fileupload-buttonbar">
                                    <div class="span7">
                                        <!-- The fileinput-button span is used to style the file input field as button -->
                                        <span class="btn btn-success fileinput-button">
                                            <i class="icon-plus icon-white"></i>
                                            <span>Add files...</span>
                                            <input name="files[]" multiple="" type="file">
                                        </span>
                                        <button type="submit" class="btn btn-primary start">
                                            <i class="icon-upload icon-white"></i>
                                            <span>Start upload</span>
                                        </button>
                                        <button type="reset" class="btn btn-warning cancel">
                                            <i class="icon-ban-circle icon-white"></i>
                                            <span>Cancel upload</span>
                                        </button>
                                        <input type="hidden" name="p" value="${currentFolderID}"/>
                                    </div>
                                    <!-- The global progress information -->
                                    <div class="span5 fileupload-progress fade">
                                        <!-- The global progress bar -->
                                        <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                                            <div class="bar" style="width:0%;"></div>
                                        </div>
                                        <!-- The extended global progress information -->
                                        <div class="progress-extended">&nbsp;</div>
                                    </div>
                                </div>
                                <!-- The loading indicator is shown during file processing -->
                                <div class="fileupload-loading"></div>
                                <br>
                                <!-- The table listing the files available for upload/download -->
                                <table role="presentation" class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
                            </form>
                           </div>
                        </div>
                    
                  </div>
                  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/dialog/jquery.ui.all.css" />
                  <!--<script src="${pageContext.request.contextPath}/scripts/dialog/jquery-1.7.2.js"></script>-->
                  <script src="${pageContext.request.contextPath}/scripts/dialog/jquery.bgiframe-2.1.2.js"></script>
                  <script src="${pageContext.request.contextPath}/scripts/dialog/jquery.ui.core.js"></script>
                  <script src="${pageContext.request.contextPath}/scripts/dialog/jquery.ui.widget.js"></script>
                  <script src="${pageContext.request.contextPath}/scripts/dialog/jquery.ui.mouse.js"></script>
                  <script src="${pageContext.request.contextPath}/scripts/dialog/jquery.ui.button.js"></script>
                  <script src="${pageContext.request.contextPath}/scripts/dialog/jquery.ui.draggable.js"></script>
                  <script src="${pageContext.request.contextPath}/scripts/dialog/jquery.ui.position.js"></script>
                  <script src="${pageContext.request.contextPath}/scripts/dialog/jquery.ui.resizable.js"></script>
                  <script src="${pageContext.request.contextPath}/scripts/dialog/jquery.ui.dialog.js"></script>
                  
                  
                  <!-- <link rel="stylesheet" href="${pageContext.request.contextPath}/css/upload/style.css"> -->
                  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/upload/bootstrap-responsive.css" />
                  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/upload/bootstrap-image-gallery.css" />
                  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/upload/jquery.css" />
                  
                  <script id="template-upload" type="text/x-tmpl">
                  {% for (var i=0, file; file=o.files[i]; i++) { %}
                  <tr class="template-upload fade">
                  <td class="preview"><span class="fade"></span></td>
                  <td class="name"><span>{%=file.name%}</span></td>
                  <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
                  {% if (file.error) { %}
                     <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
                  {% } else if (o.files.valid && !i) { %}
                     <td>
                     <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div>
                     </td>
                     <td class="start">{% if (!o.options.autoUpload) { %}
                     <button class="btn btn-primary">
                  <i class="icon-upload icon-white"></i>
                     <span>{%=locale.fileupload.start%}</span>
                     </button>
                     {% } %}</td>
                  {% } else { %}
                     <td colspan="2"></td>
                  {% } %}
                  <td class="cancel">{% if (!i) { %}
                     <button class="btn btn-warning">
                     <i class="icon-ban-circle icon-white"></i>
                     <span>{%=locale.fileupload.cancel%}</span>
                     </button>
                  {% } %}</td>
                  </tr>
                  {% } %}
               	  </script>
                  <!-- The template to display files available for download -->
                  <script id="template-download" type="text/x-tmpl">
                  </script>
                  <!-- <script src="${pageContext.request.contextPath}/scripts/upload/jquery-1.7.2.min.js"></script> -->
                  <!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
                  <script src="${pageContext.request.contextPath}/scripts/upload/jquery.ui.widget.js"></script>
                  <!-- The Templates plugin is included to render the upload/download listings -->
                  <script src="${pageContext.request.contextPath}/scripts/upload/tmpl.js"></script>
                  <!-- The Load Image plugin is included for the preview images and image resizing functionality -->
                  <script src="${pageContext.request.contextPath}/scripts/upload/load-image.js"></script>
                  <!-- The Canvas to Blob plugin is included for image resizing functionality -->
                  <script src="${pageContext.request.contextPath}/scripts/upload/canvas-to-blob.js"></script>
                  <!-- Bootstrap JS and Bootstrap Image Gallery are not required, but included for the demo -->
                  <script src="${pageContext.request.contextPath}/scripts/upload/bootstrap.js"></script>
                  <script src="${pageContext.request.contextPath}/scripts/upload/bootstrap-image-gallery.js"></script>
                  <!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
                  <script src="${pageContext.request.contextPath}/scripts/upload/jquery.iframe-transport.js"></script>
                  <!-- The basic File Upload plugin -->
                  <script src="${pageContext.request.contextPath}/scripts/upload/jquery.fileupload.js"></script>
                  <!-- The File Upload file processing plugin -->
                  <script src="${pageContext.request.contextPath}/scripts/upload/jquery.fileupload-fp.js"></script>
                  <!-- The File Upload user interface plugin -->
                  <script src="${pageContext.request.contextPath}/scripts/upload/jquery.fileupload-ui.js"></script>
                  <!-- The localization script -->
                  <script src="${pageContext.request.contextPath}/scripts/upload/locale.js"></script>
                  <!-- The main application script -->
                  <script src="${pageContext.request.contextPath}/scripts/upload/main.js"></script>
                  <!-- END UPLOAD FILES -->
</body>
</html>